<template>
  <scroll-view class="approval-wrapper" :scroll-y="true">
    <view class="content-view">
      <view class="content-item-infoData">
        <view v-if="type == 'approvalByme'" class="content-item-topView">
          <view class="content-item-icon">
            <image class="avatar-m" :src="approvalDetail.avatar" />
          </view>
          <view
            class="content-item-title"
          >{{ approvalDetail.userName
          }}{{ "的" + approvalDetail.approName }}</view>
          <view
            class="content-item-status"
            :style="{
              color: getStatusStyleColor(approvalDetail.approStatu),
              border: getStatusStyleBorder(approvalDetail.approStatu)
            }"
          >{{ getStatusTitle(approvalDetail.approStatu) }}</view>
        </view>
        <view v-if="type == 'createdByme'" class="content-item-topView">
          <view class="content-item-icon">
            <image class="avatar-m" :src="approvalDetail.avatar" />
          </view>
          <view
            class="content-item-title"
          >{{ approvalDetail.userName
          }}{{ "的" + approvalDetail.flowName }}</view>
          <view
            class="content-item-status"
            :style="{
              color: getStatusStyleColor(approvalDetail.status),
              border: getStatusStyleBorder(approvalDetail.status)
            }"
          >{{ getStatusTitle(approvalDetail.status) }}</view>
        </view>
        <view class="content-item-infoView">
          <view class="content-info-item first">
            <view class="content-item-cell">审批编号:</view>
            <view class="content-item-cell2">{{
              approvalDetail.approNumber
            }}</view>
          </view>
          <view class="content-item-separactor" />
          <view class="detail-form">
            <form-build ref="form" :fields="fields" :all-readonly="true" />
          </view>
        </view>
      </view>
      <view class="content-flow-view">
        <view class="content-flow-title">审批流程</view>
        <view class="content-flow-content">
          <!-- 审批流程111 -->
          <div
            v-for="(node, id) in approvalList"
            :key="id"
            class="bl-gray"
            :class="{ lastone: approvalList.length - 1 === id }"
          >
            <!-- 审批人 单人 -->
            <view
              v-if="
                node.nodeType == 'task' &&
                  node.userFlowApproverList &&
                  node.userFlowApproverList.length <= 1
              "
            >
              <view class="node-start">
                <image
                  v-if="node.approStatus < 2"
                  :src="'/approval/img/wait.png'"
                  class="icon-mini"
                  alt="加载失败"
                />
                <image
                  v-if="(node.approStatus === 2) | (node.approStatus === 5)"
                  :src="'/approval/img/success.png'"
                  class="icon-mini"
                  alt="加载失败"
                />
                <image
                  v-if="
                    (node.approStatus === 3) |
                      (node.approStatus === 4) |
                      (node.approStatus === 6)
                  "
                  :src="'/approval/img/error.png'"
                  class="icon-mini"
                  alt="加载失败"
                />
                <div class="node-start-info">
                  <image
                    :src="
                      node.userFlowApproverList[0].approverUserAvatar
                        ? node.userFlowApproverList[0].approverUserAvatar
                        : '/approval/img/person.png'
                    "
                    class="avatar-small"
                    alt="加载失败"
                  />
                  <view class="flex-start-s info-wrap">
                    <view class="info-mid">{{
                      node.userFlowApproverList[0].approverUserName +
                        "·" +
                        " " +
                        getStatusTitle(node.approStatus)
                    }}</view>
                  </view>
                </div>
              </view>
              <!-- 审批意见 -->
              <view
                v-if="node.userFlowApproverList[0].approverOpinion"
                class="approvaler-single"
              >
                <span class="opinion">
                  {{
                    "“ " + node.userFlowApproverList[0].approverOpinion + " ”"
                  }}</span>
              </view>
            </view>
            <!-- 多个审批人 -->
            <view
              v-if="
                node.nodeType == 'task' &&
                  node.userFlowApproverList &&
                  node.userFlowApproverList.length > 1
              "
              class="node-start"
            >
              <image
                v-if="node.approStatus < 2"
                :src="'/approval/img/wait.png'"
                class="icon-mini"
                alt="加载失败"
              />
              <image
                v-if="(node.approStatus === 2) | (node.approStatus === 5)"
                :src="'/approval/img/success.png'"
                class="icon-mini"
                alt="加载失败"
              />
              <image
                v-if="
                  (node.approStatus === 3) |
                    (node.approStatus === 4) |
                    (node.approStatus === 6)
                "
                :src="'/approval/img/error.png'"
                class="icon-mini"
                alt="加载失败"
              />
              <div class="node-start-info">
                <image
                  src="/approval/img/person.png"
                  class="avatar-m"
                  alt="加载失败"
                />
                <view class="flex-start-s info-wrap">
                  <view class="info-mid">{{
                    node.nodeName + "·" + " " + getStatusTitle(node.approStatus)
                  }}</view>
                  <view class="info-mid-type" @click="showPeople(id)">
                    <span class="border-type">{{
                      getActivateType(node.activateType)
                    }}</span>
                    <image
                      class="avatar-small"
                      :src="
                        showApprovaler === id
                          ? '/approval/img/sjup.png'
                          : '/approval/img/sjdown.png'
                      "
                      alt=""
                    />
                  </view>
                </view>
              </div>
              <span v-if="node.gmtNodeEnd" class="sub_tit info-time">
                {{ node.gmtNodeEnd | fullTime(node.gmtNodeEnd) }}
              </span>
              <span v-else class="sub_tit info-time">
                {{ " " }}
              </span>
            </view>
            <!-- 人员展开 -->
            <view v-show="showApprovaler === id" class="approvaler-wrap">
              <view
                v-for="(approvaler, idx3) in node.userFlowApproverList"
                :key="idx3"
                class="approvaler-item"
              >
                <view class="approvaler-info">
                  <image
                    class="avatar-small"
                    :src="
                      approvaler.approverUserAvatar
                        ? approvaler.approverUserAvatar
                        : '/approval/img/person.png'
                    "
                    alt="加载失败"
                  />
                  <view class="username">
                    {{ approvaler.approverUserName }}
                    <span v-if="approvaler.status > 1">
                      {{ "·" + " " + getStatusTitle(approvaler.status) }}</span>
                  </view>
                </view>
                <view v-if="approvaler.approverOpinion">
                  <span class="opinion">
                    {{ "“ " + approvaler.approverOpinion + " ”" }}</span>
                </view>
              </view>
            </view>
            <view
              v-if="node.nodeType == 'notifier'"
              class="notifier pl20 flex-start"
            >
              <view>
                <span class="spot-blue">·</span>
              </view>
              <view class="chaosong">
                <div class="color222 title">
                  抄送{{ node.userNameList && node.userNameList.length }}人
                </div>
                <view class="flex-start notifierlist">
                  <div
                    v-for="(notifier, idx4) in node.userNameList"
                    :key="idx4"
                  >
                    <span
                      class="username"
                    >{{ notifier
                    }}<span
                      v-if="node.userNameList.length - idx4 > 1"
                      class="pr10 douhao"
                    >,</span></span>
                  </div>
                </view>
              </view>
            </view>
          </div>
        </view>
      </view>
    </view>
    <view v-if="showHandle" class="content-button-view">
      <view
        v-if="repeal"
        class="content-button-content"
        @click="revokeBtnClick()"
      >
        <image class="content-button-img" src="/approval/img/repeal.png" alt>
          <view class="content-button-title">撤销</view>
        </image>
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { fullTime } from "@/utils/tools.js";
import {
  getApprovalDetailById,
  revokeApproval,
  passApproval,
  rejectApproval
} from "@/services/approval";
import FormBuild from "./FormBuild";
export default {
  components: {
    FormBuild
  },
  filters: {
    fullTime: fullTime
  },
  data() {
    return {
      approvalDetail: {},
      type: "",
      remarkContent: "",
      department: "",
      showHandle: true,
      repeal: true,
      remarkTip: "请输入审批意见",
      showApprovaler: null,
      notifierlist: [],
      approvalList: []
    };
  },
  computed: {
    fields: function() {
      return this.approvalDetail.userApproInfoList
        ? this.approvalDetail.userApproInfoList
        : [];
    }
  },
  onLoad: function(option) {
    this.type = option.type;
    this.userApproId = option.userApproId;
    this.approvalDetail = JSON.parse(decodeURIComponent(option.item));
    this.checkApprovalDetailById(this.userApproId);
    if (this.approvalDetail.status > 1) {
      this.showHandle = false;
    } else {
      this.showHandle = true;
      this.repeal = true;
    }
  },
  methods: {
    showPeople(idx) {
      this.showApprovaler = this.showApprovaler === idx ? null : idx;
    },
    checkApprovalDetailById(userApproId) {
      getApprovalDetailById(userApproId).then(res => {
        this.approvalDetail = { ...this.approvalDetail, ...res };
        this.approvalList = [];
        this.approvalDetail.userApproNodeList.forEach(item => {
          if (item.nodeType !== "start") {
            this.approvalList.push(item);
          }
        });
        // this.approvalList.push(this.approvalDetail.userApproNodeList.find(item => item.nodeType === "task"))
        this.notifierlist = this.approvalDetail.userApproNodeList.find(
          item => item.nodeType === "notifier"
        )
          ? this.approvalDetail.userApproNodeList.find(
            item => item.nodeType === "notifier"
          )
          : [];
      });
    },
    revokeBtnClick() {
      var that = this;
      uni.showModal({
        title: "提示",
        content: "确定撤销该申请？",
        success(res) {
          if (res.confirm) {
            revokeApproval(that.userApproId)
              .then(res => {
                uni.showToast({
                  title: res,
                  icon: "none",
                  duration: 2000
                });
                that.repeal = false;
                that.showHandle = false;
                that.checkApprovalDetailById(that.userApproId);
                that.approvalDetail.approStatu = 4;
              })
              .catch(err => {
                uni.showToast({
                  title: err.message,
                  icon: "none",
                  duration: 2000
                });
              });
          }
        },
        fail(err) {
          uni.showToast({
            title: err,
            icon: "none",
            duration: 2000
          });
        }
      });
    },
    agreeBtnClick(id) {
      const formRes = this.$refs.form.getValues();
      if (formRes) {
        var userApproverDTO = {
          remark: this.remarkContent,
          userApproInfoList: formRes
        };
        passApproval(id, userApproverDTO)
          .then(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          })
          .catch(err => {
            uni.showToast({
              title: err.message,
              icon: "none",
              duration: 2000
            });
          });
      } else {
        uni.showToast({
          title: "提交失败",
          icon: "none",
          duration: 2000
        });
      }
    },
    unagreeBtnClick(id) {
      const formRes = this.$refs.form.getValues();
      if (formRes) {
        var userApproverDTO = {
          remark: this.remarkContent,
          userApproInfoList: formRes
        };
        rejectApproval(id, userApproverDTO)
          .then(res => {
            uni.showToast({
              title: res.msg,
              icon: "none",
              duration: 2000
            });
          })
          .catch(err => {
            uni.showToast({
              title: err.message,
              icon: "none",
              duration: 2000
            });
          });
      } else {
        uni.showToast({
          title: "提交失败",
          icon: "none",
          duration: 2000
        });
      }
    },
    getStatusStyleColor(status) {
      if (status === 0) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "rgba(192, 192, 192, 1)";
      }
      return "rgba(192, 192, 192, 1)";
    },
    getStatusStyleBorder(status) {
      if (status === 0) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 1) {
        return "1px solid rgba(252, 175, 79, 1)";
      } else if (status === 2) {
        return "1px solid rgba(13, 182, 172, 1)";
      } else if (status === 3) {
        return "1px solid rgba(250, 80, 81, 1)";
      } else if (status === 4) {
        return "1px solid rgba(192,192,192,1);";
      }
      return "1px solid rgba(192, 192, 192, 1)";
    },
    getStatusTitle: function(status) {
      // 0:待审批1:审批中2:通过3:驳回4:撤回5：其他人通过6:其他人驳回
      if (status === 0) {
        return "待审批";
      } else if (status === 1) {
        return "审批中";
      } else if (status === 2) {
        return "已通过";
      } else if (status === 3) {
        return "已驳回";
      } else if (status === 4) {
        return "已撤回";
      } else if (status === 5) {
        return "其他人通过";
      }
      return "其他人驳回";
    },
    // 审批方式
    getActivateType: function(type) {
      // 0:依次审批;1:会签(需所有审批人同意);2:或签(一名审批人同意或拒绝即可)
      if (type === 0) {
        return "依次审批";
      } else if (type === 1) {
        return "会签";
      } else if (type === 2) {
        return "或签";
      }
      return "其他";
    }
  }
};
</script>

<style lang="scss" scoped>
.content-button-img {
  width: 24px;
  height: 24px;
  margin-right: 5px;
}
.colorE5E5E5 {
  color: #e5e5e5;
}
</style>
